<template>
  <div class="image-card" @click="handleClick">
    <div class="image-container">
      <img 
        :src="image.fileUrl" 
        :alt="image.name"
        class="image"
        @load="onImageLoad"
        @error="onImageError"
      />
      <div class="image-overlay">
        <div class="image-actions">
          <el-button 
            type="primary" 
            :icon="View" 
            circle 
            size="small"
            @click.stop="$emit('preview', image)"
          />
          <el-button 
            type="success" 
            :icon="Download" 
            circle 
            size="small"
            @click.stop="$emit('download', image)"
          />
          <el-button 
            type="warning" 
            :icon="Edit" 
            circle 
            size="small"
            @click.stop="$emit('edit', image)"
          />
        </div>
      </div>
    </div>
    
    <div class="image-info">
      <h4 class="image-title">{{ image.originalName }}</h4>
      <div class="image-meta">
        <span class="meta-item">{{ formatFileSize(image.fileSize) }}</span>
        <span class="meta-item">{{ image.width }}×{{ image.height }}</span>
      </div>
      
      <div class="image-tags" v-if="image.tags && image.tags.length > 0">
        <el-tag 
          v-for="tag in image.tags.slice(0, 3)" 
          :key="tag"
          size="small"
          class="tag-item"
          @click.stop="$emit('tagClick', tag)"
        >
          {{ tag }}
        </el-tag>
        <el-tag 
          v-if="image.tags.length > 3"
          size="small"
          type="info"
          class="tag-item"
        >
          +{{ image.tags.length - 3 }}
        </el-tag>
      </div>
      
      <div class="image-stats">
        <span class="stat-item">
          <el-icon><View /></el-icon>
          {{ image.usageCount || 0 }}
        </span>
        <span class="stat-item">
          <el-icon><ChatDotRound /></el-icon>
          {{ image.textContentCount || 0 }}
        </span>
        <span class="stat-item">
          <el-icon><Picture /></el-icon>
          {{ image.generatedImageCount || 0 }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { View, Download, Edit, ChatDotRound, Picture } from '@element-plus/icons-vue'
import type { ImageModel } from '@/types'

interface Props {
  image: ImageModel
}

interface Emits {
  (e: 'click', image: ImageModel): void
  (e: 'preview', image: ImageModel): void
  (e: 'download', image: ImageModel): void
  (e: 'edit', image: ImageModel): void
  (e: 'tagClick', tag: string): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const handleClick = (image: ImageModel) => {
  emit('click', image)
}

const onImageLoad = () => {
  // 图片加载成功
}

const onImageError = () => {
  // 图片加载失败
}

const formatFileSize = (size: number): string => {
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
  return (size / (1024 * 1024)).toFixed(1) + ' MB'
}
</script>

<style scoped>
.image-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-card:hover .image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-card:hover .image-overlay {
  opacity: 1;
}

.image-actions {
  display: flex;
  gap: 10px;
}

.image-info {
  padding: 15px;
  color: white;
}

.image-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.meta-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.image-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.tag-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

.image-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>